<template>
	<view class="changePassword">
		<view class="form_box">
			<view class="input_row_box"><input type="text" placeholder="请输入手机号" v-model="params.mobile" /></view>
			<view class="input_row_box"><input type="number" v-model="params.password" placeholder="请输入支付密码" /></view>
			<view class="input_number_smscode_box">
				<input type="text" v-model="params.sms_code" placeholder="请输入验证码" />
				<view class="fn-sz-28 fn-cl-333333" @tap="getCode">{{ tips }}</view>
			</view>
		</view>
		<view class="comfirm_btn"><button class="yellow_btn" @tap="comfirmSetPassword">确定</button></view>
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
	</view>
</template>

<script>
export default {
	data() {
		return {
			params: {
				mobile: '',
				sms_code: '',
				password: ''
			},
			event: 'pay_pwd',
			tips: '',
			seconds: 60,
			type: ''
		};
	},
	onLoad(val) {
		if (val.type) {
			this.type = val.type;
			this.$helper.toast('请先设置您的支付密码');
		}
	},
	methods: {
		comfirmSetPassword() {
			this.$api.resetPayPwd(this.params).then(res => {
				this.$helper.toast(res.msg);
				if (res.code == 1) {
					setTimeout(() => {
						var userInfo = uni.getStorageSync('userInfo');
						userInfo.member.pay_pwd = this.params.password;
						uni.setStorageSync('userInfo', userInfo);
						uni.navigateBack();
					}, 500);
				}
			});
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			const regex = /^1[3-9]\d{9}$/;
			if (regex.test(this.params.mobile)) {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					this.$api
						.getSmsCode({
							event: 'pay_pwd',
							mobile: this.params.mobile
						})
						.then(res => {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			} else {
				this.$helper.toast('请输入正确的手机号！');
			}
		}
	}
};
</script>

<style lang="scss">
.changePassword {
	background: #ffffff;
	padding: 24rpx;
	box-sizing: border-box;
	min-height: 100vh;
	.form_box {
		padding: 0 30rpx;
	}
	.input_row_box {
		padding: 35rpx 0 20rpx;
		border-bottom: 1rpx solid #eeeeee;
		input {
			font-size: 32rpx;
			font-weight: 400;
			color: #999999;
		}
	}
	.comfirm_btn {
		margin-top: 82rpx;
	}
	.input_number_smscode_box {
		display: flex;
		border-bottom: 1rpx solid #eeeeee;
		padding: 35rpx 0 20rpx;
		justify-content: space-between;
		margin-bottom: 100rpx;
		input {
			font-size: 32rpx;
			color: #333;
		}
	}
}
</style>
